<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>包含多个元素或组件的过渡动画</title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.v-enter, .v-leave-to{ opacity: 0;}
			.v-enter-active, .v-leave-active{ transition: opacity 1s}
		</style>
	</head>
	<body>
		<div id="root">
			<!-- 给分支结构加缓动 -->
				<!-- 多个dom之间的缓动动画 -->
				<!-- mode="out-in" 先隐藏后显示，mode="in-out"则相反 -->
				<transition mode="out-in">
					<!-- 让元素不复用用key值，让元素一直缓存用v-once指令或keep-live内置组件 -->
					<div v-if = "show" key="hello">hello World</div>
					<div v-else key = "bye" >Bye world</div>
				</transition>
				<button type="button" @click = "handleClick">toggle</button>
				<hr>
				<!-- 动态组件的缓动切换 -->
				<transition mode = "out-in">
					<component :is="type"></component>
				</transition>
				<button type="button" @click = "handleChange()">toggle</button>
				<hr>
			<!-- 给循环列表项加动画,用transition-group相当于给列表的每一项加了一个transition -->
			<transition-group>
				<div v-for="(item,index) in list" :key="item.id">{{item.title}}</div>
			</transition-group>
				<button @click = "handleBtnClick()">add</button>
		</div>
	</body>
	<script type="text/javascript">
		var count = 0;
		Vue.component('child',{
			template:'<div>child</div>'
		})
		Vue.component('child-one',{
			template:'<div>child-one</div>'
		})
		var vm = new Vue({
			el:"#root",
			data:{
				show: true,
				type: "child",
				list: []
			},
			methods:{
				handleClick: function () {
					this.show = !this.show;
				},
				handleChange: function(){
					this.type = this.type === "child" ? "child-one" : "child"
				},
				handleBtnClick: function(){
					this.list.push({id:count++, title:'hello world'});
				}
			}
		})
	</script>
</html>
